<html>
    <head>
        <title> WebSockets tester </title>
        <!-- Library stylesheets -->
        <link rel="stylesheet" href="css/pure-min.css" />
        <!-- Library stylesheets -->
        <link rel="stylesheet" href="css/app.css" />
        <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body onload="preparePage()">
        <div id="app_header">
            <h2 class="main_header_title"> WebSockets test utility. </h2>
        </div>
        <hr/>
        <div id="app_center">
            <div class="pure-g" style="height: 100%">
                <div class="pure-u-3-5">
                    <div class="app_center_ws_config">
                       <h4 class="header_title"> WebSockets control interface</h4>
                       <form class="pure-form pure-form-aligned">
                           <fieldset style="padding-left: 10px">
                               <div class="pure-control-group">
                                   <label class="pure-u-1-3" for="ws_address">Server address: </label>
                                   <input type="text" id="ws_address" class="pure-u-2-3" placeholder="i.e. ws://127.0.0.1:8080/chat" />
                               </div>
                               <div class="pure-control-group">
                                   <label class="pure-u-1-3" for="ws_payload">Payload: </label>
                                   <textarea id="ws_payload" class="pure-u-2-3 payload_area" placeholder="payload (json or other)"></textarea>
                                   <br/> <br/>
                                   <label class="pure-u-1-3"></label>
                                   <div class="pure-u-2-3">
                                       <button type="button" class="pure-button btn_open" onclick="openWsServer()">Open</button>
                                       <button type="button" class="pure-button btn_close" onclick="closeWsServer()">Close</button>
                                       <button type="button" id="ws_send" 
                                               class="pure-button pure-button-primary" onclick="sendDataToWsServer()">Send</button>
                                   </div>
                               </div>
                           </fieldset>
                       </form>
                    </div>
                </div>
                <div class="pure-u-2-5">
                    <div class="app_center_ws_logs">
                        <h4 class="header_title"> WebSockets interaction logs</h4>
                           <form class="pure-form pure-form-aligned">
                               <fieldset style="padding-left: 10px">
                                   <label for="ws_logs">Logs: </label>
                                   <textarea readonly id="ws_logs" class="logs_area" placeholder="logs will be displayed here"></textarea>
                               </fieldset>
                           </form>
                    </div>
                </div>
            </div>
        </div>
        <hr/>
        <div id="app_footer">
            <h6 class="footer_title">This software was developed by <a href="https://wissance.com">Wissance LLC</a>, 2019-<span id="current_year">xxxx</span> </h6>
            <h6 class="footer_title">Please support our work <a href="https://github.com/Wissance/wstester"> rise a star on github</a>! and/or subscribe to our media: <a href="https://www.youtube.com/channel/UC5Pw3s4Sz59rbHtGbV-L4XA/?sub_confirmation=1">Youtube</a>, <a href="https://m-ushakov.medium.com/">Medium</a>, <a href="https://zen.yandex.ru/id/5f9bbb6eb5987b74e7014a6f">Yandex Zen</a> or <a href="https://www.facebook.com/Wissance">Facebook</a> </h6>
        </div>

    </body>
</html>